<template>
  <div class="notfound">
    <h2>找不到页面</h2>
    <p>{{ time }}秒后返回首页。。。</p>
  </div>
</template>

<script >
export default {
  name: "NotFound",
  data() {
    return {
      time: 3,
    };
  },
  methods: {
    timeDown() {
      if (this.time > 0) {
        setTimeout(() => {
          this.time--;
          if(this.time > 0 ) this.timeDown()
        }, 1000);
      }
    },
  },
  mounted: function () {
      this.timeDown()
    setTimeout(() => {
      window.location.href = "/";
    }, 3000);
  },
};
</script>

<style scoped>
.notfound {
  border: 2px solid rgb(102, 64, 64);
  border-radius: 20%;
  background-color: rgb(255, 240, 235);
  margin-top: 50px;
}
h2 {
  text-align: center;
  color: red;
  margin-top: 30px;
}
</style>